<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <el-table
      :data="planHistory"
      max-height="520px"
      height="520px"
      style="width: 100%">

      <el-table-column
        prop="finishTime"
        label="执行时间"
      >
      </el-table-column>

    </el-table>

    <!--分页部分-->
    <el-pagination
      style="width:33%; margin-right:10px; margin-top:10px;"
      background
      layout="total, prev, pager, next, jumper"
      @current-change="historyPageCurrentChange"
      :page-size="pageConfig.size"
      :current-page="pageConfig.current"
      :pager-count="5"
      :total="pageConfig.total">
    </el-pagination>


    <span slot="footer" class="dialog-footer">
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>

  import http from '@/utils/http'

  export default {
    name: "PlanHistory",
    data(){
      return {
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '执行记录',
        },
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
        },
        // 计划历史执行数据
        planHistory: [],
        // 计划ID
        planId: null,
        // 分页参数
        pageConfig: {
          // 每页记录数
          size: 30,
          // 当前页码
          current: 1,
          // 总记录数
          total: 0,
        },
      }
    },
    methods: {
      /**
       * 打开页面
       * @param planId 计划ID
       */
      openPlanHistoryPage(planId){
        this.planId = planId
        this.pageConfig.size = 10
        this.pageConfig.current = 1
        this.pageConfig.total = 0
        this.tableConfig.show = true
        this.getPlanHistory()
      },
      /**
       * 分页被改变的时候
       * @param value 当前页
       */
      historyPageCurrentChange(value){
        this.pageConfig.current = value
        this.getPlanHistory()
      },
      /**
       * 分页查询任务执行记录
       */
      getPlanHistory(){
        http.post("/plan/getPlanHistory", {
          planId: this.planId,
          current: this.pageConfig.current,
          size: this.pageConfig.size
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          this.pageConfig.total = data.total;
          this.pageConfig.current = data.current;
          this.pageConfig.size = data.size;
          // 处理数据
          this.planHistory = data.records

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },

  }
</script>

<style scoped>

</style>
